<style itemscope>
  .layui-form-label.required:before {
    /* 这种写法也可以3*/
    content: " *";
    color: red;
  }

  .addProductionPlanForm-title .title,
  .examineProductionPlanForm-title .title {
    display: inline-block;
    margin: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 19px;
    position: relative;
    padding: 6px 0 19px 0;
  }

  .addProductionPlanForm-title .title:after,
  .examineProductionPlanForm-title .title:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 6px);
    height: 3px;
    background: #0a8b0a;
  }

  .open-form .layui-input-block {
    margin-left: 115px;
  }

  .layui-badge-rim {
    height: 20px;
    border-width: 1px;
    border-style: solid;
    background-color: #eef4f5;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    color: #6e667d;
  }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!--单独修改图片-->
<!--imgModifyForm-->
<script type="text/html" id="imgModifyForm">
  <form lay-filter="imgModifyForm" class="layui-form model-form" style="padding: 5px 30px 0 30px;height: calc(100% - 5px);overflow: hidden;">
    <div class="open-details-box" style="height: calc(100% - 75px);">
      <div class="layui-row table-bor " style="margin-top: 15px;">
        <div class="layui-form-item">
          <div id="productPic_path" class="uploadImgStyle"></div>
          <div id="productPicBtn" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传图片</div>
          <input name="productPic" type="hidden" class="layui-input" lay-verify="" id="productPic" />
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
    </div>
  </form>
</script>

<!-- 表单弹窗 -->
<form lay-filter="taskInitQualityRecordForm" class="layui-form open-form">
  <div class="open-model">
    <div class="open-auto">
      <div class="examineProductionPlanForm-title">
        <h3 class="title">任务信息</h3>
      </div>
      <!-- 表单 -->
      <div class="layui-form-item layui-row">
        <!-- <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检性质：</label>
          <div class="layui-input-block">
            <input id="qualityTestingNatureName" disabled name="qualityTestingNatureName" placeholder="质检性质" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>-->
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检类型：</label>
          <div class="layui-input-block">
            <input id="qcQualityTypeName" disabled name="qcQualityTypeName" placeholder="质检类型" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>

        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">质检性质：</label>
          <div class="layui-input-block">
            <input id="testingTypeName" disabled name="testingTypeName" placeholder="质检性质" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检分类：</label>
          <div class="layui-input-block">
            <input id="testingCategoryName" disabled name="testingCategoryName" placeholder="质检分类" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">开工单：</label>
          <div class="layui-input-block">
            <input id="workOrderCode" disabled name="workOrderCode" placeholder="开工单" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">所属计划：</label>
          <div class="layui-input-block">
            <input id="planCode" disabled name="planCode" placeholder="所属计划" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">物料编码：</label>
          <div class="layui-input-block">
            <input id="skuCode" disabled name="skuCode" placeholder="物料编码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">物料名称：</label>
          <div class="layui-input-block">
            <input id="skuName" disabled name="skuName" placeholder="物料名称" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">送检数量：</label>
          <div class="layui-input-block">
            <input id="submissionQuantity" disabled name="submissionQuantity" placeholder="请输入数量" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">送检工位：</label>
          <div class="layui-input-block">
            <input id="inspectDeviceCode" disabled name="inspectDeviceCode" placeholder="请输入送检工位" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">载具编码：</label>
          <div class="layui-input-block">
            <input id="carrierCode" disabled name="carrierCode" placeholder="请输入载具编码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">送检备注：</label>
          <div class="layui-input-block">
            <input id="remark" disabled name="remark" placeholder="请输入备注" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">状态：</label>
          <div class="layui-input-block">
            <input id="statusDescName" disabled style="border: none" name="statusDescName" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="examineProductionPlanForm-title">
        <h3 class="title">检测样品信息</h3>
      </div>

      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">样品编码：</label>
          <div class="layui-input-block">
            <input id="sampleCode" disabled name="sampleCode" placeholder="样品编码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">报检人：</label>
          <div class="layui-input-block">
            <input id="modifierName" disabled name="modifierName" placeholder="报检人" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>

        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">状态：</label>
          <div class="layui-input-block">
            <input id="statusName" disabled name="statusName" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">检测工位：</label>
          <div class="layui-input-block">
            <input id="JCInspectDeviceCode" name="JCInspectDeviceCode" placeholder="请输入检测工位" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">检测结果：</label>
          <div class="layui-input-block">
            <select id="qualityTestingResult" lay-search="" name="qualityTestingResult" lay-filter="orderNoInfo" class="common-select-search" disabled>
              <option value="">请选择</option>
              <option value="0">合格</option>
              <option value="1">不合格</option>
              <option value="2">其他</option>
            </select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">处理方法：</label>
          <div class="layui-input-block">
            <select id="dealWay" name="dealWay" disabled class="common-select-search">
              <option value="">请选择</option>
              <option value="0">报废</option>
              <option value="1">返修</option>
            </select>
          </div>
        </div>
        <div class="layui-col-md3 dealWayBox">
          <label class="layui-form-label w-auto required">异常原因：</label>
          <div class="layui-input-block">
            <select id="exception" name="exception"></select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">检测备注：</label>
          <div class="layui-input-block">
            <input disabled id="JCRemark" name="JCRemark" placeholder="请输入检测备注" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">图片：</label>
          <div class="layui-input-block">
            <img class="layui-upload-img" id="uploadPreview" style="max-width: 200px" />
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-row">
        <div class="layui-col-md12">
          <table class="layui-table" id="addQualityItemTableList" lay-filter="addQualityItemTableList" style="margin: 1px 0 10px"></table>
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right pd-20" style="padding-top: 10px !important">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
      <!-- <button
        class="layui-btn"
        id="qualityRecordDetailAndValueFormId"
        lay-filter="qualityRecordDetailAndValueFormSubmit"
        lay-submit
      >
        保存
      </button> -->
    </div>
  </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="productDetailValueTableBar">
  <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>-->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="imgClick">上传图片</a>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "laydate", "admin", "laytpl", "upload", "config"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var config = layui.config;
    var upload = layui.upload;
    var table = layui.table;
    var admin = layui.admin;
    var form = layui.form;

    let initData = {};

    let addQualityItemTableList = [];

    //初始化详情信息 3
    let taskQualityDetailValueData = admin.getTempData("taskQualityDetailValueData");
    console.log(222, taskQualityDetailValueData);

    await admin.initDataSelectPro(
      "production/quality/admin/taskQualityRecord/getAbnormalCauseBy/" + taskQualityDetailValueData.processId,
      {},
      "exception",
      "异常原因",
      null,
      "name"
    );
    // form.val("taskInitQualityRecordForm", taskQualityDetailValueData);

    if (taskQualityDetailValueData) {
      $("#JCInspectDeviceCode").val(taskQualityDetailValueData.JCInspectDeviceCode);
      // form.val("taskInitQualityRecordForm", {
      //   paperSlipPic: taskQualityDetailValueData.paperSlipPic,
      // });
      // $("#JCRemark").src = res.data.url;

      $("#uploadPreview").attr("src", taskQualityDetailValueData.paperSlipPic);
      $("#JCRemark").val(taskQualityDetailValueData.JCRemark);

      if (taskQualityDetailValueData.qualityTestingResult === "qualified") {
        $("#qualityTestingResult").val("0");
      } else if (taskQualityDetailValueData.qualityTestingResult === "unqualified") {
        $("#qualityTestingResult").val("1");
      } else {
        $("#qualityTestingResult").val("2");
      }
      if ($("#qualityTestingResult").val() == 1) {
        $("#dealWayDiv").show();
        $("#dealWay").val(taskQualityDetailValueData.dealWay);
      }
      //初始化数据1
      console.log("taskQualityDetailValueData", taskQualityDetailValueData);

      admin.reqSync(
        "production/quality/admin/taskQualityRecord/getDetailRecordValue",
        {
          taskId: taskQualityDetailValueData.taskId,
          recordDetailId: taskQualityDetailValueData.recordDetailId,
          bookId: taskQualityDetailValueData.bookId
        },
        (res) => {
          if (res.code == 200) {
            initData = res.data;
            form.val("taskInitQualityRecordForm", initData);
            console.log(123, initData);

            $("#statusName").val(initData.statusDesc);
            //初始化检测项目
            addQualityItemTableList = res.data.detailValueInfoVos;
            table.reload("addQualityItemTableList", {
              data: addQualityItemTableList
            });
          }
        },
        "GET"
      );
    }
    //config.getUser().username
    $("#modifierName").val(config.getUser().username);

    //选择开工单
    //检测类型
    const itemTypeRes = await admin.reqPro("enterprise/dict/admin/dictLabel/select", { dictType: "sys_qc_quality_type" });
    const itemTypeList = itemTypeRes.data;
    //质检方法
    const qualityWayRes = await admin.reqPro("enterprise/dict/admin/dictLabel/select", { dictType: "sys_detection_method" });
    const qualityWayList = qualityWayRes.data;
    // 质检设备
    const deviceModelSpuRes = await admin.reqPro("enterprise/device/admin/deviceModel/list", { limit: 9999 });
    const deviceModelSpuList = deviceModelSpuRes.data;
    // 重要程度
    const importanceRes = await admin.reqPro("enterprise/dict/admin/dictLabel/select", { dictType: "pro_importance_type" });
    const importanceList = importanceRes.data;
    let addQualityDetailRecordTable = table.render({
      elem: "#addQualityItemTableList",
      data: addQualityItemTableList,
      id: "addQualityItemTableList",
      limit: 9999,
      cols: [
        [
          // { type: "numbers", title: "序号", align: "center" },
          // {
          //   field: "processQualityName",
          //   title: "检测项目",
          //   align: "center",
          //   width: 200,
          // },
          // { field: "utensil", title: "检测器具", align: "center" },
          // { field: "way", title: "检验方法", align: "center" },
          // { field: "standard", title: "标准/规格", align: "center" },
          { type: "numbers", title: "序号", align: "center" },
          {
            field: "processQualityName",
            title: "检测项目",
            align: "center"
          },
          {
            field: "no",
            title: "检测项目编码",
            align: "center"
          },
          // { field: "utensil", title: "检测分类", align: "center" },
          {
            field: "itemType",
            title: "检测类型",
            align: "center",
            templet: (d) => {
              return itemTypeList.find((v) => v.labelValue == d.itemType) ? itemTypeList.find((v) => v.labelValue == d.itemType).labelName : "-";
            }
          },
          {
            field: "way",
            title: "检验方法",
            align: "center",
            templet: (d) => {
              return qualityWayList.find((v) => v.labelValue == d.way) ? qualityWayList.find((v) => v.labelValue == d.way).labelName : "-";
            }
          },
          {
            field: "utensil",
            title: "检测器具",
            align: "center",
            templet: (d) => {
              return deviceModelSpuList.find((v) => v.id == d.utensil) ? deviceModelSpuList.find((v) => v.id == d.utensil).name : "-";
            }
          },
          {
            field: "importance",
            title: "重要程度",
            align: "center",
            templet: (d) => {
              return importanceList.find((v) => v.labelValue == d.importance) ? importanceList.find((v) => v.labelValue == d.importance).labelName : "-";
            }
          },
          {
            field: "processQualityValueName",
            edit: "text",
            title: "检测结果(必填)",
            align: "center"
          },
          {
            field: "remark",
            edit: "text",
            title: "质检备注(选填)",
            align: "center"
          },
          {
            field: "fileName",
            edit: "text",
            title: "图片名称",
            align: "center"
          },
          {
            field: "fileUrl",
            edit: "text",
            title: "图片地址",
            align: "center"
          },
          {
            align: "center",
            toolbar: "#productDetailValueTableBar",
            title: "操作",
            width: 300
          }
        ]
      ]
    });

    //工具条的点击事件
    table.on("tool(addQualityItemTableList)", function (obj) {
      if (obj.event === "imgClick") {
        imgModify(obj);
      }
    });

    function imgModify(obj) {
      admin.open({
        type: 1,
        area: ["900px", "500px"],
        offset: "65px",
        title: "上传图片",
        content: $("#imgModifyForm").html(),
        success: function () {
          form.val("imgModifyForm", obj.data);
          if (obj.data.fileUrl) {
            $("#productPic_path").html('<img class="checkImg" style="max-height:350px; max-width: 700px" src="' + obj.data.fileUrl + '"/>');
          }
          //上传图片
          $("#productPicBtn").click(uploadImg("productPicBtn", "productPic_path", "productPic", true, obj));
        }
      });
    }

    // 上传文件
    /*
     * _elem: 上传按钮的名字,
     * pathId: 显示图片容器的名字,
     * inputId: 提交文件路径元素的名字,
     * isMultiple: 是不是多文件(单文件为空或者false,多文件true)
     *
     * */
    function uploadImg(btn, pathId, inputId, isMultiple, obj) {
      upload.render({
        elem: "#" + btn,
        url: config.upload_url + "uploadFile", //新上传接口
        data: {},
        accept: "file",
        exts: "jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx",
        headers: { Authorization: "Bearer " + config.getToken() },
        done: function (res) {
          if (res.code == 200) {
            layer.msg(res.msg || "上传成功", { icon: 1 });
            let imagUrl = res.data.url;
            let imagName = res.data.fileName;
            if (isMultiple == true) {
              obj.update({
                fileUrl: imagUrl,
                fileName: imagName
              });
              $("#" + pathId).html('<img src="' + imagUrl + '"/>');
              $("#" + inputId).val(imagUrl);
            } else {
              obj.update({
                fileUrl: imagUrl,
                fileName: imagName
              });
              $("#" + pathId).html('<img src="' + imagUrl + '"/>');
              $("#" + inputId).val(imagUrl);
            }
          } else if (res.code == 502) {
            return location.replace("admin/login.html");
          } else {
            layer.msg(res.msg || "上传失败", { icon: 2 });
          }
        }
      });
    }

    // 表单提交事件
    form.on("submit(qualityRecordDetailAndValueFormSubmit)", function (d) {
      layer.load(2);
      let submitFieldInfo = {};
      submitFieldInfo.detailValueInfoVos = table.cache["addQualityItemTableList"];
      submitFieldInfo.recordId = taskQualityDetailValueData.recordDetailId;
      submitFieldInfo.remark = $("#JCRemark").val();
      submitFieldInfo.qualityTestingResult = $("#qualityTestingResult").val();
      submitFieldInfo.qualityTestingResultName = $("#qualityTestingResult").val();
      submitFieldInfo.inspectDeviceCode = $("#JCInspectDeviceCode").val();
      submitFieldInfo.inspectDeviceId = "";
      admin.req(
        "production/quality/admin/taskQualityRecord/submitResultValue",
        JSON.stringify(submitFieldInfo),
        function (res) {
          layer.closeAll("loading");
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            let index = $("#qualityRecordDetailAndValueFormId").closest(".layui-layer").attr("times");
            layer.close(index);
            table.reload("addQualityDetailRecordTableList");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "POST",
        true,
        "application/json; charset=utf-8"
      );
      return false;
    });
  });
</script>
